<template>
  <div id="classify">
    <van-row>
      <van-col span="24">
        <van-nav-bar title="分类" left-arrow @click-left="onClickLeft" />
      </van-col>
      <van-col span="24">
        <van-search v-model="value" placeholder="请输入搜索关键词" input-align="center" @click="onInput()" />
      </van-col>
      <van-row>
        <van-col span="5">
          <van-sidebar v-model="activeKey" @change="onChange">
            <van-sidebar-item :title="item.name" v-for="(item, index) in categoryList" :key="index" />
          </van-sidebar>
        </van-col>
        <van-col span="19" class="showGoodsList">
          <van-row>
            <van-col span="24" class="class-top-img">
              <img :src="currentCategory.picUrl" alt="" />
            </van-col>
            <van-col span="24">
              <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"> {{ currentCategory.name }}分类 </van-divider>
            </van-col>
            <van-col span="24" class="class-goods">
              <van-col span="8" class="class-goods-box" v-for="(item, index) in currentSubCategory" :key="index" @click="onGoGoodsClass(item, index)">
                <div>
                  <img :src="item.picUrl" alt="" />
                  <p>{{ item.name }}</p>
                </div>
              </van-col>
            </van-col>
          </van-row>
        </van-col>
      </van-row>
    </van-row>
  </div>
</template>
<script>
export default {
  name,
  data() {
    return {
      value: '',
      activeKey: 0,
      categoryList: '', //用来转化数据
      sidebarIndex: 0, //当前切换的下标,
      currentList: '', //分类商品的内容
      currentCategory: '', //当前页面的内容
      currentSubCategory: '' //子分类的内容
    }
  },
  created() {
    this.onGetGoodsClass()
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    // 前往分类商品页面
    onGoGoodsClass(item, index) {
      this.$router.push({ path: '/goodsclass', query: { item, index } })
    },
    onInput() {
      this.$router.push('/search')
    },
    // 获取分类栏数据
    onGetGoodsClass() {
      this.$get('catalog/index').then(result => {
        console.log(result)
        this.categoryList = result.data.data.categoryList
        this.currentCategory = result.data.data.currentCategory
        this.currentSubCategory = result.data.data.currentSubCategory
      })
    },
    // 通过动态的获取
    onChange(index) {
      console.log(index)
      let i = index == null ? 0 : index
      this.$get('catalog/current', { id: this.categoryList[i].id }).then(result => {
        console.log(result)
        this.currentCategory = result.data.data.currentCategory
        this.currentSubCategory = result.data.data.currentSubCategory
      })
    }
  }
}
</script>
<style lang="less" scoped>
.showGoodsList {
  padding: 0.15rem;
}
.class-top-img {
  img {
    width: 100%;
    border-radius: 0.1rem;
  }
}
.class-goods {
  .class-goods-box {
    text-align: center;
    padding: 0.1rem;
    div {
      img {
        width: 100%;
      }
      p {
        font-size: 0.13rem;
      }
    }
  }
}
</style>
